<fieldset class="section">
    <legend>Thông tin chi tiêu</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 200px;">
            <col>
        </colgroup>
        <tr>
            <td>Số tiền chi</td>
            <td>
                <input type="text" id="txt-sotien" value="0"> đồng
            </td>
        </tr>
        <tr>
            <td>Lý do</td>
            <td>
                <textarea style="width: 350px; height: 100px; resize: none;" id="txt-lydo"></textarea>
            </td>
        </tr>
    </table>
    <button type="button" onclick="QuanLyChiTieu.ThemChiTieu(this);"><span class="fa-loading fa fa-spin fa-refresh" style="display: none;"></span> Thêm chi tiêu</button>
</fieldset>

<fieldset class="section" style="margin-top: 30px;">
    <legend>Chi tiêu gần đây</legend>
    <table class="table-tools">
        <colgroup>
            <col style="width: 100px;">
            <col>
        </colgroup>
        <tr>
            <td>Ngày bắt đầu</td>
            <td>
                <input type="text" id="txt-begin" value="<?php echo date('d/m/Y'); ?>">
            </td>
        </tr>
        <tr>
            <td>Ngày kết thúc</td>
            <td>
                <input type="text" id="txt-end" value="<?php echo date('d/m/Y'); ?>">
            </td>
        </tr>
    </table>
    <button type="button" onclick="QuanLyChiTieu.XemDanhSachChiTieu(this);"><span class="fa-loading fa fa-spin fa-refresh" style="display: none;"></span> Xem chi tiêu</button>

    <table class="table-views" style="margin-top: 20px;">
        <colgroup>
            <col style="width: 40px;">
            <col style="width: 250px;">
            <col>
            <col style="width: 250px;">
        </colgroup>
        <thead>
            <tr>
                <td>STT</td>
                <td>Thời gian</td>
                <td>Lý do chi</td>
                <td>Số tiền</td>
            </tr>
        </thead>
        <tbody>
            <tr class="default-row" style="display: none;">
                <td class="stt" style="text-align: center;"></td>
                <td class="thoigian" style="padding-left: 5px;"></td>
                <td class="lydochi" style="padding-left: 5px;"></td>
                <td class="sotien" style="padding-left: 5px;"></td>
            </tr>
            <tr class="total-row" style="display: none;">
                <td colspan="3" style="font-weight: bold; text-align: right; padding-right: 10px;">Tổng chi:</td>
                <td class="total" style="padding-left: 5px; font-weight: bold;"></td>
            </tr>
        </tbody>
        <tbody id="container">

        </tbody>
    </table>
</fieldset>

<script>
    $("#txt-sotien").autoNumeric(
        'init', {aSep: ',', mDec: '0', vMax: '999999999999999'}
    );

    $( "#txt-begin" ).datepicker({ dateFormat: 'dd/mm/yy' });
    $( "#txt-end" ).datepicker({ dateFormat: 'dd/mm/yy' });
</script>